<template>
	<view class="container">
		<view class="top_title">
		</view>
		<view class="employ_part" v-for="(item,index) in liveList" :key="index" @click="goLiveRoom(item)" >
			<view class="left">
				<view class="name">
					<image :src="item.user.avatar" mode="" class="avartar"></image>
				</view>
				<view class="distance_address">
					{{item.desc}}
				</view>
				<view class="company_person">
					<text>{{item.room}}</text>
				</view>
			</view>
			<view class="right">
				<view class="distance_address">
					直播
				</view>
				<view class="money">
					{{item.user.nickname}}
				</view>
				<view class="go_rob">
					{{item.user.sex === 1 ? '男' : '女' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectItem: "job",
				imgYu: 'http://zf.hualin688.com',
				liveList: [],
				userInfo: {},
				type: 1

			}
		},
		created() {
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.userInfo = res.data;
				}
			});
		},
		mounted() {
			this.getList()
		},
		methods: {
			goLiveRoom(liveEvent) {
				uni.$emit("enterLiveRoom", {
					roomId: liveEvent.uid,
					anchorId: liveEvent.user.id, 
					roomName: liveEvent.room, 
					anchorName: liveEvent.user.nickname, 
					coverUrl: liveEvent.image === '0' ? '' : liveEvent.image, 
					pusher_avatar: liveEvent.user.avatar,
				});
			},

			getList() {
				let _this = this
				this.$utils.requert({
					url: 'roomList',
					type: 'post'
				}).then(res => {
					if (res.code === 1) {
						console.log("res", res);
						// this.liveList = res.data.data;
						this.liveList = res.data.data.filter( (item) => {
							if(item.status !== 0) {
								return item;
							}
						})
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			}


		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.avartar {
		width: 110rpx;
		height: 110rpx;
		margin-right: 28rpx;
		border-radius: 50%;
	}
	.container {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.employ_part {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f6f6f6;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.employ_part .name {
		font-size: 31rpx;
		color: #323232;
	}

	.distance_address {
		font-size: 24rpx;
		color: #838282;
	}

	.left .distance_address {
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.employ_part .types {
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.employ_part .types .type_item {
		padding: 0 8rpx;
		border: 1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #FB8408;
		margin-right: 16rpx;
		flex-shrink: 0;
	}

	.company_person {
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.company_person image {
		width: 42rpx;
		height: 42rpx;
		margin-right: 17rpx;
	}

	.right {
		text-align: right;
		display: flex;
		margin-right: 20rpx;
		flex-direction: column;
	}

	.left {
		flex: 1;
		width: 20%;
	}

	.right .money {
		font-size: 28rpx;
		color: #FB8408;
	}

	.go_rob {
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color: #Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		position: absolute;
		bottom: 40rpx;
		right: 0;
		border-radius: 7rpx;
	}


	.top_title {
		display: flex;
		margin-top: 18rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f6f6f6;
		align-items: baseline;
	}

	.top_title .name {
		margin-right: 70rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.top_title .active_name {
		font-size: 34rpx;
		color: #FB8408;
	}
</style>
